/*
  image：image对象
  sx：图片的x轴位置
  sy：图片的y轴位置
  w：图片的宽度
  h：图片的高度
  x：图片在canvas中显示的x轴位置
  y：图片在canvas中显示的y轴位置
  rotation：图片旋转的角度，炮台旋转等，单位为度，而非弧度
  scale：图片的缩放倍数
  speed：物体移动的速度
*/
class Sprite {
  constructor(options) {
    this.image    = options.image;
    this.sx       = options.sx || 0;
    this.sy       = options.sy || 0;
    this.w        = options.w || this.image.width;
    this.h        = options.h || this.image.height;
    this.x        = options.x || 0;
    this.y        = options.y || 0;
    this.rotation = options.rotation || 0;
    this.scaleX    = options.scaleX || 1;
    this.scaleY    = options.scaleY || 1;
    this.speed    = options.speed || 0;

    this.frame = options.frame || 0;     //当前帧
    this.max_frame = options.max_frame || 0; //最大帧
    this.tick = options.tick || 0;
    this.max_tick = options.max_tick || 10; //tick和max_tick用于控制帧的速度
  }

  /*
  入参context：canvas.getContext('2d')
  注意点：
    1.canvas的坐标中心是在左上角的，而在游戏制作中，中心点一般是物体的中心
    2.canvas的translate,rotate的执行顺序和CSS3的一致的，都是从后往前执行
      transform:translate,rotate;先执行rotate再执行translate
  */
  draw(context){
    context.save();
    //把中标中心转移到(this.x,this.y)
    context.translate(this.x,this.y);
    context.rotate(this.rotation * Math.PI / 180);
    //解决鱼从右边出来时，影子错误问题
    context.scale(this.scaleX,this.scaleY);
    //在canvas上画图，以所画物体的中心为圆点
    context.drawImage(
      this.image,
      this.sx,this.sy,this.w,this.h,
      -this.w/2,-this.h/2,this.w,this.h
    );
    context.restore();
  }

  /*
  入参context：canvas.getContext('2d')
  注意点：
    1.物体移动的时候，注意速度在x，y轴的分解(物体移动的速度分解图.png)
    2.鱼在0°的时候，向右移动的；其他的物体，如炮弹在0°的时候向上移动的。
  */
  move(){
    //求解x,y轴的速度
    let speed_x = this.speed * Math.sin(this.rotation * Math.PI / 180);
    let speed_y = this.speed * Math.cos(this.rotation * Math.PI / 180);
    //console.log(speed_x,speed_y);
    this.x += speed_x;
    //向上移动的，所以要减；因为canvas的坐标轴和实际数学不一致
    this.y -= speed_y;
  }

  /*
    设置帧的偏移量
  */
  setFrame(frame){
    this.sy = frame * this.h;
  }

  nextFrame(){
    this.tick++;
    if (this.tick == this.max_tick) {
      this.tick = 0;
      this.frame++;
      if(this.frame == this.max_frame){
        this.frame = 0;
        this.setFrame(this.frame);
        return true;  //是否停止动画
      }else {
        this.setFrame(this.frame);
        return false; //是否停止动画
      }
    }
  }

  /*
    参数：canvas画布的宽高
    判断物体是否超出canvas画布
  */
  isOutOfCanvas(w,h){
    if (
      this.x > this.w/2 + w + 100 ||
      this.x < -this.w/2 - 100    ||
      this.y > this.h/2 + h + 100 ||
      this.y < -this.h/2 - 100
    ) {
      return true;
    }else {
      return false;
    }
  }

  /*
    碰撞检测
    原理：
      把两个物体当做圆来处理
  */
  collisionTest(sprite2){
    let r1 = Math.min(this.w/2,this.h/2);
    let r2 = Math.min(sprite2.w/2,sprite2.h/2);
    let dis = Math.hypot(this.x-sprite2.x,this.y-sprite2.y);
    return dis <= r1 + r2;
  }

}
